<template>
    <div class="wrap">
        <app-headers></app-headers>
        <!--  -->
        <div class="contentTop">
            <div class="headercontent">
                <span>
                    <img src="/img/userphoto.png" alt="用户头像" />
                </span>
                <h5>{{ username }}</h5>
            </div>
        </div>

        <!--  -->
        <div class="contenBody">
            <p>
                <span>我的订单</span>
            </p>
            <van-grid>
                <van-grid-item icon="balance-list-o" text="待支付" />
                <van-grid-item icon="send-gift-o" text="待发货" />
                <van-grid-item icon="logistics" text="待签收" />
                <van-grid-item icon="exchange" text="退货换货" />
            </van-grid>
        </div>
        <!--  -->
        <div class="contentMain">
            <a href="###">
                <img src="/img/ulike.png" alt="我的收藏" />
                <span>我的收藏</span>
            </a>
            <a href="###">
                <img src="/img/uconpon.png" alt="优惠券" />
                <span>优惠券</span>
            </a>

            <router-link to="/address">
                <img src="/img/uaddress.png" alt="收货地址" />
                <span>收货地址</span>
            </router-link>

            <a href="###">
                <img src="/img/urealname.png" alt="实名认证" />
                <span>实名认证</span>
            </a>
            <a href="###">
                <img src="/img/usafe.png" alt="账户安全" />
                <span>账户安全</span>
            </a>
            <a href="###">
                <img src="/img/uhelp.png" alt="帮助中心" />
                <span>帮助中心</span>
            </a>
        </div>
        <div class="quit">
            <input type="button" value="退出登录" @click="quit" />
        </div>
    </div>
</template>

<script>
import appHeaders from "../components/headers";
import usersApi from "../api/userApi";
import { getUser, logOut } from "../utils/auth.js";

export default {
    data() {
        return {
            username: "未登录"
        };
    },

    components: {
        appHeaders
    },

    methods: {
        // 根据用户名发请求获取用户信息    findquery={username：xxx}
        // getuser(findquery) {
        //   usersApi
        //     .getuser(findquery)
        //     .then(res => {
        //       // console.log(res.data.data[0]);//该用户登录了
        //     })
        //     .catch(err => {
        //       console.log(err);
        //     });
        // },

        // 查看cookie,判断用户是否存在；
        getusername() {
            let username = getUser(); //没有登录是undefined
            if (username) {
                this.username = username;
            }
        },

        // 退出登录
        quit() {
            logOut();
            // 轻提示
            this.$toast("退出成功");
            this.$router.push("/home");
            localStorage.setItem("cart", JSON.stringify([]));
        }
    },

    created() {
        // 登录展示用户名
        this.getusername();
    }
};
</script>

<style scoped lang="scss">
@import "@/assets/sass/common.scss";
@import "@/assets/sass/vw.scss";

.wrap {
    background-color: #eee;
    overflow-y: hidden;
}

.contentTop {
    height: v(60);
    overflow: hidden;
    position: relative;
    background: url("/img/userBackground.jpg") no-repeat;
    background-size: 100% 100%;
    margin-bottom: v(10);
    padding: v(20);
    span {
        float: left;
        width: v(60);
        height: v(60);
        border-radius: v(30);
        margin-right: v(10);
        background-color: #fcf6fc;
        img {
            width: 100%;
        }
    }
    h5 {
        line-height: v(60);
        color: #fff;
        font-size: v(15);
    }
}

.contenBody {
    overflow: hidden;
    margin-bottom: v(10);
    padding-bottom: v(10);
    background-color: #fff;
    p {
        width: v(365);
        height: v(20);
        padding: v(13) v(10) v(13) 0;
        background: #fff url("/img/order_go.png") 96% center no-repeat;
        background-size: v(6) v(11);
        border-bottom: v(1) solid #eee;
        span {
            display: block;
            padding-left: v(14);
            line-height: v(20);
            color: #333;
            font-size: v(15);
        }
    }
}

a {
    cursor: pointer;
    color: #d70057;
}

.contentMain {
    overflow: hidden;
    width: 100%;
    background: #fff;
    margin: v(10) 0;
    a {
        float: left;
        width: 25%;
        padding: v(24) 0 v(24);
        text-align: center;
        border-bottom: v(1) solid #e8e8e8;
        img {
            width: v(22);
            height: v(22);
            margin: 0 auto v(12);
        }
        span {
            display: block;
            text-align: center;
            font-size: v(13);
            color: #666;
        }
    }
}

.quit {
    padding: v(10) v(10) v(48) v(10);
    input {
        width: 100%;
        height: v(35);
        line-height: v(35);
        border-radius: v(4);
        text-align: center;
        background-color: #d70057;
        color: #fff;
        font-size: v(15);
        font-weight: bold;
    }
}
</style>
